<template>
  <view class="selector-view">
    <view class="bg-green light padding radius title">
      可参与促销活动
    </view>
    <view class="selector-list show-y-scroll-bar" v-if="list&&list.length>0">
    
      <view class="selector-list-item flex align-center justify-between"
        :class="{active:curSelect&&curSelect.id&&item.id===curSelect.id}" v-for="item in list" @click="checked(item)">
        <view class="left">
          <view class="left-title">
            {{item.promotion_name||''}}
          </view>
          <view class="">
            <text>{{item.promotion_mode}}:</text>
            <text v-if="item.promotion_mode==='满额减现'">满{{item.buy_full}}减{{item.discount_amount}}</text>
            <text v-else>{{item.direct_discount}}%</text>
          </view>
        </view>
        <view class="right">
          {{setMoneyStr(item._discount_total_amount||0)}}
        </view>
      </view>
    </view>
    <view class="selector-list flex align-center justify-center" v-else>
      <u-empty text="暂无可选择的优惠活动"></u-empty>
    </view>
    <view class="flex align-center justify-center padding margin">
      <button class="button line-white margin-right" @click="cancel()">取消</button>
      <button class="button line-white margin-right" @click="cancel('cancel')" v-if="list&&list.length>0">不使用</button>
      <button class="button" :class="{'disabled':!curSelect}" @click="confirm()" v-if="list&&list.length>0">使用</button>
    </view>
  </view>
</template>

<script>
  export default {
    name: "promotion-selector",
    props: {
      list: {
        type: Array
      },
      default: {
        type: Object
      }
    },
    data() {
      return {
        curSelect: null
      };
    },
    created() {
      if (this.default?.id) {
        this.curSelect = this.default
      }
    },
    methods: {
      checked(e) {
        this.curSelect = e
      },
      confirm() {
        this.$emit('confirm', this.curSelect)
      },
      cancel(e = '') {
        this.curSelect = ''
        this.$emit('cancel', e)
      },
    },
  }
</script>

<style lang="scss">
  .selector-view {
    width: 50vw;
    .title{
      width: 40vw;
      margin: 0 auto 2rem;
      text-align: center;
      padding: 2rem;
      font-size: 2.4rem;
    }
    .selector-list {
      height: 60vh;

      font-size: 2.4rem;
      width: 40vw;
      height: 60vh;
      margin: 0 auto;

      &-item {
        border-radius: 1rem;
        border: 1px solid #eee;
        overflow: hidden;
        margin: 0 auto;
        margin-right: 1.5rem;
        margin-bottom: 1rem;
        padding: 2rem;

        &.active {
          border-color: $retail-color-primary;
          background-color:$retail-color-primary-light;
          color: $retail-color-primary;
          .top {
            background-color: #DEF2EA;
          }
        }
        .left{
          flex: 1;
          padding-right: 1rem;
          overflow: hidden;
          .left-title{
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .top {
          padding: 2rem;
          // background-color: #DEF2EA;
          height: 12rem;
          display: flex;
          flex-direction: column;
          justify-content: center;

          .type {
            font-size: 2rem;
            padding: 1rem 0 0;
            display: flex;
            justify-content: space-between;
          }

          .title {
            display: flex;
            font-weight: bold;
            justify-content: space-between;

            .right {
              color: $retail-color-primary;
            }
          }
        }

        .bottom {
          font-size: 2rem;
          color: #A6A6A6;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 1rem;

          .btn {
            width: 6rem;
            height: 4rem;
            line-height: 4rem;
            border-radius: 2rem;
            background: #F5F5F5;
            text-align: center;
            font-size: 2rem;
          }
        }
      }

    }
  }
</style>
